<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加资讯</title>
    <style type="text/css">
        div{
            width: 640px;
            height: 720px;
            margin: 0px auto;
        }
        .insinfo{
            width:1280px;
            height:720px;
            background-image: url("../img/bg2.jpg");
            background-repeat:no-repeat;
            /*text-align:center*/

        }

    </style>
</head>
<body bgcolor="black">
<!--<body background="../img/bg2.jpg" >-->
<div class="insinfo">
<div style="color: white">
    <label >标题&emsp;</label>
    <input id="title" type="text" width="500" height="14">
    <br>
    <label>副标题</label>
    <input id="subtitle" type="text" width="200" height="14">
    <br>
    <label>类型&emsp;</label>
    <input id="type" type="text" width="200" height="14">
    <br>
    <label>图片&emsp;</label>
    <br>
    <img id="preview_photo" src="" width="200px" height="200px">
    <br>
    <input id = "photoFile" type="file"  width="200" height="14">
    <br>
    <button onclick="submitImg()">上传图片</button>
    <br>
    <label>内容</label>
    <br>
    <!--        <input id="content" type="text" width="200" height="14">-->
    <textarea id="content" rows="10" cols="50" style="resize: none"></textarea>
    <br>
    <label>视频</label>
    <br>
    <input id = "videoFile" type="file" width="200" height="14" videoUrl = "">
    <br>
    <button onclick="submitVideo()">上传视频</button>
    <br>
    <button type="button" onclick="submit()">提交</button>
</div>
</div>
</body>

</html>
<script type="text/javascript" src="js/1.8.2.min.js"></script>
<script>
    function submit() {
        var  usedata = {};
        usedata['title']= $("#title").val();
        usedata['subtitle']= $("#subtitle").val();
        usedata['type']= $("#type").val();
        usedata['imgUrl']= $("#preview_photo").attr("src");
        usedata['content']= $("#content").val();
        usedata['videoUrl']= $("#videoFile").attr("videoUrl");
        // 使用AJAX提交数据
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/Release/insert",
            data: JSON.stringify(usedata) ,
            success: function (data) {
                $("#title").val("");
                $("#subtitle").val("");
                $("#type").val("");
                $("#content").val("");
                $("#preview_photo").attr("src","");
                $("#photoFile").val("");
                $("#videoFile").attr("videoUrl","");
                alert(data.msg);
            }
        });
    }
    function submitImg() {
        var formData = new FormData();
        formData.append('photo', document.getElementById('photoFile').files[0]);
        $.ajax({
            url:"/file/uploadPhoto",
            type:"post",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                if (data.type == "success") {
                    $("#preview_photo").attr("src", data.imgUrl);
                } else {
                    alert(data.msg);
                }
            },
            error:function(data) {
                alert("上传失败");
            }
        });
    }
    function submitVideo() {
        var formData = new FormData();
        formData.append('video', document.getElementById('videoFile').files[0]);
        $.ajax({
            url:"/file/uploadVideo",
            type:"post",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                if (data.type == "success") {
                    $("#videoFile").attr("videoUrl", data.videoUrl);
                    alert("上传成功！");
                } else {
                    alert(data.msg);
                }
            },
            error:function(data) {
                alert("上传失败");
            }
        });
    }
</script>